<template>
  <el-checkbox-group
    v-model="checkedList"
    @change="handleCheckedChange"
    class="grid grid-cols-2 gap-25px"
  >
    <div v-for="(item, index) in dataList" :key="item.fnId" class="flex flex-col relative">
      <el-checkbox :label="item.name" :value="item.fnId">{{ item.name }}</el-checkbox>
      <audio :src="item.fnUrl" controls class="mt10px mb-10px w-100%"></audio>
      <div class="flex justify-between items-center c-#BDBDBD font-size-13px mt-10px mb-10px">
        <span>格式：{{ item.format }}</span>
        <span>大小：{{ item.size }}</span>
      </div>
      <el-divider border-style="dashed" />
      <div class="flex h25px">
        <el-button type="primary" size="small" @click="Detail(item.fnId)">查看详情</el-button>
        <el-button type="success" size="small">下载申请</el-button>
      </div>
    </div>
  </el-checkbox-group>
</template>

<script setup>
const props = defineProps({
  dataList: {
    type: Array,
    default: () => []
  }
})

const dataList = ref([])

const isIndeterminate = defineModel()
const checkedList = ref([])

onMounted(()=>{
  dataList.value = props.dataList
})

const handleCheckedChange = (value) => {
  const checkedCount = value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < dataList.value.length
}
// 查看详情
const Detail=(id)=>{
    // 视频详情
    const url = `${window.location.origin}/search/audio/detail?id=${id}&buttonState=${false}`
    window.open(url, '_blank')
}

const playVideo = (index) => {
  const video = document.getElementById('my-video' + index)
  if (video.paused) {
    video.play()
    dataList.value[index].playVideoState = true
  } else {
    video.pause()
    dataList.value[index].playVideoState = false
  }
}
defineExpose({
  checkedList,
})
</script>

<style lang="scss" scoped>
:deep(.el-divider--horizontal) {
  margin: 10px 0 !important;
}

.video-wrapper {
  position: relative;
}

.video-player {
  width: 100%;
  /* Removing default controls */
  background-color: black; /* Default background color if controls are removed */
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
